<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/student_info.min.css">
<script src="./jquery/jquery-3.2.1.min.js"></script>

<body>
    <div class="wrap">
        <h2>学生信息查询</h2>
        <table border="1px" class="get_stu_id">
            <tr>
                <th colspan="3">请您想要查询学生的学号</th>
                <th colspan="3" id="get_stu_id" contenteditable="true"></th>
                <th colspan="3"><button id="submit">提交</button></th>
            </tr>
        </table>
        <br>
        <table class="student_info" border="1px">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
                <th>出生日期</th>
                <th>爱好</th>
                <th>男或女朋友</th>
                <th>头像</th>
            </tr>
            <tr>
                <td class="stu_id"></td>
                <td class="stu_name"></td>
                <td class="stu_sex"></td>
                <td class="stu_jg"></td>
                <td class="stu_date"></td>
                <td class="stu_hobby"></td>
                <td class="stu_gbf"></td>
                <td class="stu_head_img"></td>
            </tr>
        </table>
        <br>
        <h2>学生入学考试成绩</h2>
        <table class="entry_exam" border="1px">
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>理综</th>
                <th>文综</th>
            </tr>
            <tr>
                <td class="chinese"></td>
                <td class="math"></td>
                <td class="english"></td>
                <td class="lizong"></td>
                <td class="wenzong"></td>
            </tr>
        </table>
        <br>
        <h2>学生期中考试成绩</h2>
        <table class="mid_exam" border="1px">
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>理综</th>
                <th>文综</th>
            </tr>
            <tr>
                <td class="chinese"></td>
                <td class="math"></td>
                <td class="english"></td>
                <td class="lizong"></td>
                <td class="wenzong"></td>
            </tr>
        </table>
        <br>
        <h2>学生期末考试成绩</h2>
        <table class="end_exam" border="1px">
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>理综</th>
                <th>文综</th>
            </tr>
            <tr>
                <td class="chinese"></td>
                <td class="math"></td>
                <td class="english"></td>
                <td class="lizong"></td>
                <td class="wenzong"></td>
            </tr>
        </table>
        <br>
    </div>

</body>
<script>
    $("#submit").click(() => {
        let number = console.log($("#get_stu_id").text())
        $.ajax({
            method: "get",
            url: `http://localhost:3000/search_info/?stu_id=${$("#get_stu_id").text()}`,
            success: (data) => {
                for (key in data.stu_info) {
                    $(`.student_info .${key}`).text(data.stu_info[key])
                }
                for (key in data.entry_exam) {
                    $(`.entry_exam .${key}`).text(data.entry_exam[key])
                }
                for (key in data.mid_exam) {
                    $(`.mid_exam .${key}`).text(data.mid_exam[key])
                }
                for (key in data.end_exam) {
                    $(`.end_exam .${key}`).text(data.end_exam[key])
                }
            },
            error: (err) => {
                console.log(err)
            }
        })
    })
</script>

</html>